<template>
    <div>
        <h3>1、商品基本信息：</h3>
        <el-form ref="form" :model="addGoodsIfo" label-width="80px">
        <el-form-item label="商品名称">
            <el-input v-model="addGoodsIfo.name"></el-input>
            <i class="el-icon-error" v-show="errNum == 0">请输入商品名称</i>
        </el-form-item>
        <el-form-item label="商品价格">
            <el-input v-model="addGoodsIfo.price" class="form-num"></el-input>
            <i class="el-icon-error" v-show="errNum == 1">请输入商品价格(仅可为数字)</i>
        </el-form-item>
            <el-form-item label="商品库存">
                <el-input v-model="addGoodsIfo.stock"></el-input>
                <i class="el-icon-error" v-show="errNum == 2">请输入商品库存(仅可为数字)</i>
            </el-form-item>
        <el-form-item label="商品描述">
            <el-input type="textarea" v-model="addGoodsIfo.describe" ></el-input>
            <i class="el-icon-error" v-show="errNum == 3">请输入商品文字描述信息</i>
        </el-form-item>
        <el-form-item label="商品分类">
            <el-cascader
                    :options="$store.state.goodsType"
                    v-model="addGoodsIfo.category"
                    @change="handleChange"
                    >
            </el-cascader>
            <i class="el-icon-error" v-show="errNum == 4"> 请输入商品类别</i>
        </el-form-item>
        <el-button type="primary" @click="subessentiall" class="next">下一步</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "EssentialInfo",
        props: {
            addGoodsIfo: {
                type: Object
            }
        },
        data() {
            return {
                errNum:9,
                selectedOptions: []
            }
        },
        methods: {
            subessentiall() {
                let pric = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
                let isNum = /^[0-9]*$/;
                const { name, price, stock, describe, category } = this.addGoodsIfo;
                if (name == '') {
                    this.errNum = 0;
                    return;
                } else if (price == '' || !pric.test(price)) {
                    this.errNum = 1;
                    return;
                } else if (stock == '' || !isNum.test(stock)) {
                    this.errNum = 2;
                    return;
                } else if (describe == '') {
                    this.errNum = 3;
                    return;
                } else if (category.length == 0) {
                    this.errNum = 4;
                    return;
                } else {
                    this.$emit('overEssentiall');
                }
            },
            handleChange(value) {
                console.log(value)
            }
        }
    }
</script>

<style scoped>
    i {
        color: red;
    }
    .next {
        position: absolute;
        bottom: 20px;
        left: 50%;
    }
</style>